<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <link href="css/map.css" rel="stylesheet" type="text/css">
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=QtcnFOuHGa8IcsDwnaSdDSO83qgepGTt"
            type="text/javascript"></script>
    <script src="https://code.bdstatic.com/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <title></title>

</head>
<body>
<div class="container" id='container'></div>

<div class="address">
    <input id="sheng" name="sheng" placeholder="省份" type="text"/>
    <input id="shi" name="shi" placeholder="市级" type="text"/>
    <input id="xian" name="xian" placeholder="县" type="text"/>
    <a>详细地址
        <input id="xiangqing"/>
    </a>
    <div class="person">
        <span class="adress_receive">收货人：</span>
        <input id="consignee"/>
        <span class="adress_tel">手机号码：</span>
        <input id="artel"/>
    </div>
    <button id="add" type="button" value="添加">添加</button>
</div>
<script>
    //实例化地图
    var map = new BMapGL.Map('container');

    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

    var localcity = new BMapGL.LocalCity();
    localcity.get(e => {
        map.centerAndZoom(e.name, 11);      // 用城市名设置地图中心点
    });
    var geoc = new BMapGL.Geocoder();
    map.addEventListener('click', function (e) {
        //清除地图上所有的覆盖物
        map.clearOverlays();
        var pt = e.latlng;
        var marker = new BMapGL.Marker(new BMapGL.Point(pt.lng, pt.lat));
        map.addOverlay(marker);
        geoc.getLocation(pt, function (rs) {
            var addComp = rs.addressComponents;

            var shengInput = document.getElementById('sheng');
            shengInput.value = addComp.province;
            var shiInput = document.getElementById('shi');
            shiInput.value = addComp.city;
            var xianInput = document.getElementById('xian');
            xianInput.value = addComp.district;
            $('#result_l').text(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
        });
    });

    var userData = localStorage.getItem('userData');
    userData = JSON.parse(userData);
    let uno = userData.uno;


    $("#add").click(function () {
        let sheng = $("#sheng").val();
        let shi = $("#shi").val();
        let xian = $("#xian").val();
        let xiangqing = $("#xiangqing").val();
        let address=sheng+shi+xian+xiangqing;
        console.log(address);
        let artel = $("#artel").val();
        let consignee = $("#consignee").val();
        $.get("address", {
                op: "add",
                uno: uno,
                address: address,
                artel: artel,
                consignee:consignee
            },
            function (rs) {
                if (rs > 0) {
                    alert("添加成功");
                    window.location.href="personal.html";
                } else {
                    alert("删除失败！");
                }


            }, "json");
    });

</script>
</body>
</html>